<template>
  <div>
    <el-button type="text" @click="uuidbtnClick">UUID</el-button>
    <el-dialog
      title="UUID"
      :visible.sync="dialogVisible"
      width="500px">
      <span>
        {{ uuid }}
        <el-button type="text" @click="copyBtnClick">复制</el-button>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="refreshBtnClick" size="small">刷 新</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script lang="ts">
  import { Vue, Component, Prop } from 'vue-property-decorator'
  import { get } from '@/api/ajax'
  import { GlobalApi } from '@/api/apis'
  import YBPopView from "@/utils/popView";

  @Component({
    name: 'UUID',
    components: {}
  })
  export default class UUID extends Vue{
    dialogVisible = false

    uuid = ''

    uuidbtnClick() {
      this.dialogVisible = true
      this.refreshBtnClick()
    }

    refreshBtnClick() {
      get<string>(GlobalApi.uuid).then((data: string) => {
        this.uuid = data
      })
    }

    copyBtnClick() {
      this.$copyText(this.uuid).then(function (){
        YBPopView.msgSuccess('复制成功')
      })
    }
  }

</script>

<style lang="scss">
  .text-line-box {
    .el-form-item {
      margin-bottom: 0px;
    }
    .el-form-item__label {
      font-weight: bold;
    }
    .text {
      color: #999;
    }
  }
</style>
